<template>
	<div class="page">
		<Head />
		<div class="mainBody">
			<div class="home routerView">
				<!-- 热门游戏 -->
				<div class="popular-wp">
					<div class="popular">
						<div class="left">
							<font style="vertical-align: inherit;">
								<font style="vertical-align: inherit;">热门游戏</font>
							</font>
						</div>
						<div class="right">
							<div class="user-icons">
								<div></div>
								<div></div>
								<div></div>
								<div></div>
							</div>
							<font style="vertical-align: inherit;">
								<font style="vertical-align: inherit;"> 18051 在线玩家 </font>
							</font>
						</div>
					</div>
					<div class="popularGames">
						<div class="classification" v-for="(item,index) in popularGames" :key="index">
							<div class="img-wp"><img :src="item.pic" alt=""></div>
							<div class="gameName">{{item.title}}</div>
							<div class="maskLayer"></div>
							<div class="startGame">开始玩</div>
						</div>
					</div>
				</div>
				<!-- 奖品即将推出 -->
				<div class="immediatelyTheLottery">
					<div class="immediatelyTheLotteryLeft">
						<div class="immediatelyTheLotteryTitle">
							<div class="jj">
								<font style="vertical-align: inherit;">
									<font style="vertical-align: inherit;">奖品即将推出</font>
								</font>
							</div>
							<div class="gdyx">
								<font style="vertical-align: inherit;">
									<font style="vertical-align: inherit;"> 其他游戏 &gt; </font>
								</font>
							</div>
						</div>
						<div class="immediatelyContent">
							<div class="popularBetting" v-for="(item,index) in 6" :key="index">
								<div class="lottery-info-wp">
									<div class="lottery-name">
										<font style="vertical-align: inherit;">
											<font style="vertical-align: inherit;"> 1分钟VIP基诺 </font>
										</font>
									</div>
									<div class="countdown-wp" style="width: 120px;">
										<div class="iconfont icon-icon_clock"></div>
										<vue-count-down-time startTime="2020-03-07 20:00:00" endTime="1583586000000"
											showTemplate="<span class='bb'>${day}:</span><span class='bb'>${hour}:</span><span class='bb'>${min}:</span><span class='bb'>${sec}</span>">
										</vue-count-down-time>
									</div>
									<div class="money-wp">
										<div class="iconfont icon-icon_stake"></div>
										<div>1千</div>
									</div>
									<div class="odds-wp">
										<div class="iconfont icon-icon_odds"></div>
										<div>1.9k~9.2k</div>
									</div>
								</div>
								<div class="play-info-wp">
									<div>金融</div>
									<div>头晕的</div>
									<div>奇怪的</div>
								</div>
								<div class="betting"><span class="iconfont icon-icon_flash"></span>下注</div>
							</div>
						</div>
					</div>
					<div class="immediatelyTheLotteryRight">
						<div class="gameTitle">
							<font style="vertical-align: inherit;">
								<font style="vertical-align: inherit;"> 快速娱乐游戏 </font>
							</font>
						</div>
						<div class="gameContent">
							<div class="gameReality" v-for="(item,index) in kgames" :key="index">
								<img :src="item.pic" alt="">
								<div class="gameRealityButton"></div>
								<div class="maskLayer">
									<div class="txt">
										<font style="vertical-align: inherit;">
											<font style="vertical-align: inherit;"> 开始玩 </font>
										</font>
									</div>
								</div>
							</div>
							<!---->
						</div>
					</div>
				</div>
				<!-- 下载APP到手机随时随地投注 -->
				<div class="app-download-wp" id="appDownload">
					<div class="app-download">
						<div class="slogan-wp">
							<div>
								<font style="vertical-align: inherit;">
									<font style="vertical-align: inherit;">下载APP到手机</font>
								</font>
							</div>
							<div class="dot"></div>
							<div>
								<font style="vertical-align: inherit;">
									<font style="vertical-align: inherit;"> 随时随地投注 </font>
								</font>
							</div>
						</div>
						<div class="short-line"></div>
						<div class="spec">
							<div>
								<font style="vertical-align: inherit;">
									<font style="vertical-align: inherit;">一款集各类游戏于一体的APP应用，操作简单..</font>
								</font>
							</div>
							<div>
								<font style="vertical-align: inherit;">
									<font style="vertical-align: inherit;">最新最全系列，扫描下方二维码立即下载！</font>
								</font>
							</div>
						</div>
						<div class="QR-code-wp">
							<div class="QR-code">
								<img src="../assets/img/wx.png">
								<div class="txt">
									<font style="vertical-align: inherit;">
										<font style="vertical-align: inherit;"> IOS下载 </font>
									</font>
								</div>
							</div>
							<div class="QR-code">
								<img src="../assets/img/wx.png">
								<div class="txt">
									<font style="vertical-align: inherit;">
										<font style="vertical-align: inherit;">下载安卓</font>
									</font>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
			<Foot />
		</div>
		<!-- 公告 -->
		<el-dialog title="Thông báo mới nhất" :visible.sync="dialogAnnounce" custom-class="announce-dialog"
			width="805px">
			<div class="announce-panel-wp">
				<div class="tab-wp">
					<span class="tab" @click="tab(0)" :class="cur == 0?'active':''"> Thông báo mới nhất </span>
					<span class="tab " @click="tab(1)" :class="cur == 1?'active':''"> Trung tâm thông báo </span>
				</div>
				<div class="announceContent">
					<div class="tab-content-wp">
						<div class="content-wp">
							<div class="content-title-wp">
								<div class="title">CẢNH BÁO LỪA ĐẢO</div>
								<div class="time">2021-11-03 19:39:38</div>
							</div>
							<div class="content">CẢNH BÁO LỪA ĐẢO NẠP TIỀN.Hiện tại có 1 số thành
								phần giả danh nhân viên XOSO BET CASINO LỪA ĐẢO về NẠP TIỀN để tránh phát sinh không
								mong muốn, quý hội viên lưu ý KHÔNG CUNG CẤP THÔNG TIN CÁ NHÂN cũn</div>
						</div>
					</div>
					<div class="tab-content-wp">
						<div class="content-wp">
							<div class="content-title-wp">
								<div class="title">XIN LƯU Ý : NGÂN HÀNG</div>
								<div class="time">2021-09-09 21:33:03</div>
							</div>
							<div class="content">Tài khoản nạp tiền được thay đổi theo thời gian
								không cố định, trước khi nạp tiền vào Game vui lòng chú ý cập nhật lại trên hệ thống
								game để xác nhận lại Ngân hàng mỗi khi bạn nạp tiền! Nhà cái XOSOBE</div>
						</div>
					</div>
					<div class="tab-content-wp">
						<div class="content-wp">
							<div class="content-title-wp">
								<div class="title">XỔ SỐ 1 ăn 99.6</div>
								<div class="time">2021-09-09 21:28:27</div>
							</div>
							<div class="content">VỀ XOSO BET Nhà Cái nổi tiếng hàng đầu CHÂU Á với độ
								uy tín, bảo mật, tỷ lệ cược cao và cực nhiều phúc lợi. Bên cạnh đó XOSO BET CASINO còn
								mang lại cho quý Hội Viên dịch vụ và sự phục vụ siêu tốt ！Đă</div>
						</div>
					</div>
				</div>
			</div>
		</el-dialog>
	</div>
</template>

<script>
	// @ is an alias to /src
	import Head from '@/components/Head.vue'
	import Foot from '@/components/Foot.vue'
	export default {
		name: 'Home',
		components: {
			Head,
			Foot
		},
		data() {
			return {
				dialogAnnounce: true,
				popularGames: [{
						pic: require('../assets/img/g1.png'),
						title: '彩票'
					},
					{
						pic: require('../assets/img/g2.png'),
						title: '彩票'
					},
					{
						pic: require('../assets/img/g3.png'),
						title: '彩票'
					},
					{
						pic: require('../assets/img/g4.png'),
						title: '彩票'
					},
					{
						pic: require('../assets/img/g5.png'),
						title: '彩票'
					},
				],
				kgames: [{
						pic: require('../assets/img/k1.jpg'),
						title: '彩票'
					},
					{
						pic: require('../assets/img/k2.jpg'),
						title: '彩票'
					},
					{
						pic: require('../assets/img/k3.jpg'),
						title: '彩票'
					},
				],
				cur:0
			};
		},
		methods: {
			tab(i){
				this.cur = i
			}
		}
	}
</script>
